<template>
<div>
    <el-input></el-input>
    <el-button type="primary" round>查询</el-button>
    <el-button type="primary" @click="dialogVisible = true">新增</el-button>
    <el-button type="primary" @click="toggleSelection()">取消选择</el-button>
    <el-button type="danger" @click="multiDelete">批量删除</el-button>
  <el-table
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)"
      style="width: 100%">
    <el-table-column
        type="selection"
        width="55">
    </el-table-column>
    <el-table-column
        prop="timeString"
        label="日期"
        width="180">
    </el-table-column>
    <el-table-column
        prop="stuRealName"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="visitStatus"
        label="状态"
        :formatter="visitStatusFormatter">
    </el-table-column>
    <el-table-column
        prop="teacherRealName"
        label="初访师">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" type="primary" v-if="scope.row.visitStatus === 1" @click="handleManage(scope.$index, scope.row)"
        >安排</el-button
        >
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
        :hide-on-single-page="value"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="PageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
    </el-pagination>
  </div>
  <el-dialog
      v-model="dialogVisible"
      title="新增初访记录"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :model="addLog" ref="addFirstLog" :rules="addRules">
      <el-form-item prop="stuName">
        学生姓名
        <el-input name="stuName" v-model="addLog.stuName"></el-input>
      </el-form-item>
      <el-form-item prop="teacherName">
        意向老师
        <el-select v-model="addLog.teacherName">
          <el-option
          v-for="item in Firstvisitman"
          :label="item.stuName"
          :value="item.stuUsername"
          :key="item.stuUsername">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="time">
        时间
        <br>
        工作日
        <el-select name="time" v-model="addLog.Time.Week" @change="getDict_Time">
          <el-option
          v-for="item in timeDict_Week"
          :label="item"
          :value="item"
          :key="item"></el-option>
        </el-select>
        <br>
        时间段
        <el-select v-model="addLog.Time.Time">
          <el-option
          v-for="item in timeDict_Time"
          :label="item"
          :value="item"
          :key="item">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit"
        >提交</el-button
        >
      </span>
    </template>
  </el-dialog>


  <el-dialog
      v-model="manageDialogVisible"
      title="安排初访"
      width="30%"
      :before-close="handleManageDialogClose"
  >
    <el-form :model="manageLog" ref="manageFirstLog" :rules="manageRules">
      <el-form-item prop="stuName">
        学生姓名：
        <span>{{manageLog.stuName}}</span>
      </el-form-item>
      <el-form-item prop="time">
        时间：
        <span>{{manageLog.Time.Week}}  {{manageLog.Time.Time}}</span>
      </el-form-item>
      <el-form-item prop="intentionRealName">
        意向老师：
        <span>{{manageLog.intentionRealName}}</span>
      </el-form-item>
      <el-form-item prop="teacherName">
        当前时段空闲老师：
        <br>
        <el-select v-model="manageLog.teacherId">
          <el-option v-for="item in spareFirstvisitmen"
                     :label="item.stuName"
          :value="item.id"
          :key="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="manageDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleManageDialogSubmit"
        >提交</el-button
        >
      </span>
    </template>
  </el-dialog>
</div>
</template>

<script >
import {get_first_visit_log} from "../../api";
import {getTimeById, getSingleTime, getWeekday,getTimeByWeekday} from "../../api/time";
import {getUserById,getConsultantById,getConsultants,getSpareTeacherByTimeId,getFirstvisitman_api,getFirstvisitmanById,getSpareFirstvisitmanByTimeId_API} from "../../api/user";
import {submitFirstLog, deleteById, multiDelete, appointFirstVisit} from "../../api/firstLog";
import {ElMessage} from "element-plus";
export default {
  name: "first_visit_log",
  created() {
    this.getData()
    this.getSingleTimeDict_Week()
    this.get_Consultants()
    this.getFirstvisitman()
  },
  methods: {

    handleManage(index,row){
      this.manageDialogVisible = true
      console.log(row)
      this.manageLog.id = row.id
      this.manageLog.Time.Week = row.timeString.substring(0,2)
      this.manageLog.Time.Time = row.timeString.substring(2,row.timeString.length)
      this.manageLog.timeId = row.timeId
      this.manageLog.stuId = row.stuId
      this.manageLog.stuName = row.stuRealName
      this.manageLog.intentionId = row.teaId
      this.manageLog.intentionRealName = row.teacherRealName
      console.log(this.manageLog)
      // getSpareTeacherByTimeId(this.manageLog.timeId).then(res=>{
      //   console.log(res)
      //   if(res.code === 1){
      //       this.spareConsultants = res.data
      //   } else {
      //     ElMessage.error(res.message)
      //   }
      // })
      getSpareFirstvisitmanByTimeId_API(this.manageLog.timeId).then(res=>{
        console.log(res)
        if(res.code === 1){
          this.spareFirstvisitmen = res.data
        } else {
          ElMessage.error(res.message)
        }
      })
    },
    handleManageDialogClose(){
      this.$confirm('确认关闭？')
          .then(_ => {
            this.manageDialogVisible = false
            done();
          })
          .catch(_ => {});
    },
    handleManageDialogSubmit(){
      console.log(this.manageLog)
      appointFirstVisit(this.manageLog.id,this.manageLog.teacherId).then(res=>{
        console.log(res)
        if(res.code === 1){
          this.getData()
          ElMessage.success(res.message)
        } else {
          ElMessage.error(res.message)
        }
      })
      this.manageDialogVisible=false
    },
    multiDelete(){
      console.log(this.multipleSelection)
      multiDelete(this.multipleSelection).then(res=>{
        console.log(res)
        if(res.code === 1){
          ElMessage.success(res.message)
          this.getData()
        } else {
          ElMessage.error(res.message)
        }
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    async handleSubmit(){
      this.dialogVisible = false
      await console.log(this.addLog)
      submitFirstLog(this.addLog).then(res=>{
        if(res.code === 1){
          console.log(res)
          this.getData()
        } else {
          ElMessage.error(res.message);
        }
      })
      console.log('提交')
    },
    get_Consultants(){
      getConsultants().then(res=>{
        if(res.code === 1){
          console.log(res)
          this.Consultants = res.data
        }
      })
    },
    getFirstvisitman(){
      getFirstvisitman_api().then(res=>{
        if(res.code === 1){
          console.log(res)
          this.Firstvisitman = res.data
        }
      })
    },
    getDict_Time(e){
      getTimeByWeekday(e).then(res=>{
        if(res.code === 1){
          this.timeDict_Time = res.data
        }
      })
    },
    getSingleTimeDict_Week(){
        getWeekday().then(res=>{
          if(res.code === 1){
            this.timeDict_Week = res.data
          }
        })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleDelete(index,row){
      console.log(row.id)
      deleteById(row.id).then(res=>{
        if(res.code === 1){
          console.log(res)
          ElMessage.success(res.message)
          this.getData()
        } else {
          ElMessage.error(res.message)
        }
      })
    },
    handleEdit(index,row){
      console.log(row)
    },
    visitStatusFormatter(x){
      let row = x.visitStatus
      if(row === 1){
        return '预约中'
      } else if(row === 2){
        return '进行中'
      } else if(row === 3){
        return '已完成'
      } else if(row === 4){
        return '中止'
      } else if(row === 5){
        return '延长'
      } else {
        return '未知'
      }
    },
    async getConsultant(x){
      await getConsultantById(x).then(res=>{
        if(res.code === 1){
          console.log(res)
          this.Consultant = res.data.stuUsername
        } else {

        }
      })
    },
    async getFirstvisitmanById(x){
      await getFirstvisitmanById(x).then(res=>{
        if(res.code === 1){
          console.log(res)
          this.Firstvisit = res.data.stuUsername
        } else {

        }
      })
    },
    async getTime(x){
      await getTimeById(x).then(res=>{
        if(res.code === 1){
          this.time = res.data.weakDay+' '+res.data.timeDay
        } else {

        }
      })
    },
    async getName(x) {
      await getUserById(x).then(res => {
        if (res.code === 1) {
          this.stuName = res.data.stuUsername
        } else {

        }
      })
    },
    async getStuRealName(x) {
      await getUserById(x).then(res=>{
        if(res.code === 1){
          this.StuRealName = res.data.stuName
        } else {

        }
      })
    },
    async getTeacherRealName(x) {
      await getUserById(x).then(res=>{
        if(res.code === 1){
          this.TeacherRealName = res.data.stuName
        } else {

        }
      })
    },
    async getData(){
     await get_first_visit_log().then(async res => {
       if (res.code === 1) {
         this.tableData = res.data;
         console.log(res.data)
         for (let i = 0; i < this.tableData.length; i++) {
           await this.getName(this.tableData[i].stuId)
           await this.getTime(this.tableData[i].timeId)
           // await this.getConsultant(this.tableData[i].teaId)
           await this.getFirstvisitmanById(this.tableData[i].teaId)
           await this.getStuRealName(this.tableData[i].stuId)
           await this.getTeacherRealName(this.tableData[i].teaId)
           this.tableData[i].stuRealName = await this.StuRealName
           this.tableData[i].teacherRealName = await this.TeacherRealName
           this.tableData[i].stuUsername = await this.stuName
           this.tableData[i].timeString = await this.time
           this.tableData[i].teacherUsername = await this.Firstvisit
         }

         // this.tableData.forEach(async x => {
         //   await this.getName(x.stuId)
         //   await this.getTime(x.timeId)
         //   await this.getConsultant(x.teaId)
         //   x.stuId = this.stuName
         //   x.timeId = this.time
         //   x.teaId = this.Consultant
         // })
       }
     })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.PageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
    }
  },
  data() {
    return{
      spareFirstvisitmen:[],
      spareConsultants:[],
      manageTime:'',
      manageLog:{
        id:'',
        timeId:'',
        stuId:'',
        teacherId:'',
        stuName:'',
        teacherName: '',
        Time: {
          Time:'',
          Week:''
        },
        intentionId:'',
        intentionRealName:'',
        intentionUsername:''
      },
      manageDialogVisible:false,
      PageSize:10,
      value:true,
      currentPage:1,
      multipleSelection: [],
      TeacherRealName:'',
      StuRealName:'',
      Consultants: [],
      Firstvisitman: [],
      addLog:{
        stuName:'',
        teacherName: '',
        Time: {
          Week: [{}],
        Time: [{}]
        }
      },
      timeDict_Week:[],
      timeDict_Time:[],
      dialogVisible: false,
      tableData:[{id:'',
        stuRealName:'',
        teacherRealName:'',
        stuId:'',
        stuUsername:'',
        timeId:'',
        timeString:'',
        visitStatus:'',
        teaId:'',
        teacherUsername:'',
      }],
      stuName:'',
      teacherName:'',
      time:'',
      Consultant:'未安排',
      Firstvisit:'未安排',
      addRules: {
        stuName: [{
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }],
        time: [{
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }]
      },
      manageRules: {
        stuName: [{
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }],
        time: [{
          required: true,
          message: '不能为空',
          trigger: 'blur'
        }]
      }
    }
  }
}
</script>

<style scoped>
.block{
  text-align: center;
}
</style>
